<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>姓名案例-函数方法实现</title>
</head>
<body>
<div id="app">
  <p>姓：<input type="text" v-model="lastName"></p>
  <p>名：<input type="text" v-model="firstName"></p>
  <!--  这里的模板语法中使用的是函数方法，而方法中使用到了vue实例中的data的数据，一旦data的数据发生变化，那么vue就会
      重新加载模板，而随着模板的重新加载，插值语法中的方法就会被重新调用，解析的函数方法中的返回值自然会随着data中数据的变化而变化-->
  <p>全名：{{fullName()}}</p>
  <p>全名：{{fullName()}}</p>
  <p>全名：{{fullName()}}</p>
  <p>全名：{{fullName()}}</p>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
  const vm=new Vue({
    el:"#app",
    data(){
      return{
        firstName:"三",
        lastName:"张1",
      }
    },
    methods:{
      fullName(){
        console.log(this)
        return this.lastName+"-"+this.firstName
      }
    }
  })
</script>
</body>
</html>
